<template>
    <div>
        <el-container element-loading-lock="true">
            <el-header height="50px">
                <Header></Header>
            </el-header>
            <el-container>
                <el-aside width="auto">
                    <Menu></Menu>
                </el-aside>
                <el-main class="container" :style="`margin-left: ${containerLeft}px;`">
                    <RouterView v-slot="{ Component }">
                        <component :is="Component" :key="routeKeys[$route.fullPath] || $route.fullPath" />
                    </RouterView>
                </el-main>
            </el-container>
        </el-container>
    </div>
</template>


<script setup>
import { onMounted, ref } from 'vue';
import { RouterView, useRoute } from 'vue-router'

import emits from '@/utils/emits';
import { MittType } from '@/constant';

import Header from './component/Header.vue';
import Menu from './component/Menu.vue';

const route = useRoute();
const routeKeys = ref({});
const containerLeft = ref(230);

//函数
/**
 * 设置菜单边栏可见性。
 */
emits.on(MittType.Switchsidebar, (visibility) => {
    containerLeft.value = !visibility ? 75 : 230;
});

/**
 * 刷新当前页
 */
emits.on(MittType.RefreshView, () => {
    routeKeys.value[route.fullPath] = new Date().getTime();
});

</script>


<style lang="less" scoped>
.container {
    margin-top: 0;
    padding: 0 10px;
}
</style>